<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task 07</title>
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <style>
    	.BST{
    width: 1200px;
    height: 600px;
    border: 2px solid #3355d0;
    overflow: auto;
    background-color: #FFFFFF;
    margin: auto;
}
.second{
    width: 550px;
    height: 400px;
    border: 1px solid #3355d0;
    margin: 98px 24px;
    overflow: auto;
    float: left;
    background-color: #FFFFFF;
}
.third{
    width: 250px;
    height: 200px;
    border: 1px solid #3355d0;
    margin: 98px 11px;
    overflow: auto;
    float: left;
    background-color: #FFFFFF;
}
.forth{
    width: 99px;
    height: 73px;
    border: 1px solid #3355d0;
    margin: 62px 12px;
    overflow: auto;
    float: left;
    background-color: #FFFFFF;
}
.control{
    width: 300px;
    height: 30px;
    margin: 30px auto;
    overflow: auto;
}
.control input{
    width: 25%;
    height: 100%;
}
    </style>
</head>
<body>
<div class="BST" id="root">
    <div class="second">
        <div class="third">
            <div class="forth"></div>
            <div class="forth"></div>
        </div>
        <div class="third">
            <div class="forth"></div>
            <div class="forth"></div>
        </div>
    </div>
    <div class="second">
        <div class="third">
            <div class="forth"></div>
            <div class="forth"></div>
        </div>
        <div class="third">
            <div class="forth"></div>
            <div class="forth"></div>
        </div>
    </div>
</div>
<div class="control">
    <input type="button" value="先序遍历" id="preOrder">
    <input type="button" value="中序遍历" id="inOrder">
    <input type="button" value="后序遍历" id="postOrder">
</div>
<script>
	var root=document.getElementById("root");
var btnPreOrder=document.getElementById("preOrder");
var btnInOrder=document.getElementById("inOrder");
var btnPostOrder=document.getElementById("postOrder");
var timer=0;
function showNode(node) {
    // alert(node.tagName);
    node.style.backgroundColor="#ffffff";
    setTimeout(function () {
        node.style.backgroundColor="#ff524a";
    },timer+=500);
    setTimeout(function () {
        node.style.backgroundColor="#ffffff";
    },timer+=500);
}
function preOrder(root) {
    if(root){
        showNode(root);
        preOrder(root.children[0]);
        preOrder(root.children[1]);
    }
}
function inOrder(root) {
    if(root){
        inOrder(root.children[0]);
        showNode(root);
        inOrder(root.children[1]);
    }
}
function postOrder(root) {
    if (root){
        postOrder(root.children[0]);
        postOrder(root.children[1]);
        showNode(root);
    }
}
btnPreOrder.addEventListener("click",function () {
    preOrder(root);
    timer=0;
},false);
btnInOrder.addEventListener("click",function () {
    inOrder(root);
    timer=0;
},false);
btnPostOrder.addEventListener("click",function () {
    postOrder(root);
    timer=0;
},false);
</script>
</body>
</html>